<template>
	<uni-search-bar @confirm="onSearch" :focus="true" v-model="searchValue"  focus />
	<view class="keywords-wrap" v-if="!searchValue||wallList.length===0">
		<view class="">
			<view class="title">
				<view class="left">最近搜索</view>
				<view class="right">
					<uni-icons type="trash" size="20" @click="historyList=[]"></uni-icons>
				</view>
			</view>
			<view class="keywords">
				<span v-for="(item) in historyList" :key="item" class="item" @click="onSearch(item)">{{item}}</span>
			</view>
		</view>
		<view class="">
			<view class="title">
				<view class="left">热门搜索</view>
			</view>
			<view class="keywords">
				<view v-for="(item) in hotList" :key="item" class="item" @click="onSearch(item)">{{item}}</view>
			</view>
		</view>
	</view>
	<view class="container">
		<navigator :url="`/pages/classify/classlist/preview/preview?current=${index}`" class="item" v-for="(item, index) in wallList"
			:key="item._id">
			<image class="image" :src="item.smallPicurl" mode="aspectFill" ></image>
		</navigator>
	</view>
	<uv-empty v-if="showEmpty" mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png"></uv-empty>
	<custom-loading v-if="showLoading" :status="noMore" />
</template>

<script setup>
import { apiSearchWallList } from '@/service/apis/home';
const searchValue = ref('')
const wallList = ref([])
const historyList = ref(uni.getStorageSync('historySearch')||[])
const hotList = ref(['宠物','风景','美女','帅哥'])
const noMore = ref('');
const pageSize = 12;
const onSearch = async(e) => {
	if (e) 	{
		searchValue.value = e.value||e;
		noMore.value = 'loading';
		wallList.value = []
	}
	if(!searchValue.value) {
		uni.showToast({title:'请输入搜索内容',icon:'none'})
		return;
	}
	const params = {
		pageNum: e?1:wallList.value.length/pageSize +1,
		pageSize: pageSize,
		keyword: searchValue.value
	}
	const res = await apiSearchWallList(params)
	wallList.value = [...wallList.value, ...res]
	historyList.value = Array.from(new Set([searchValue.value,...historyList.value ])) .slice(0,10); // 去重, 取前10个
	noMore.value = res.length < pageSize ? 'noMore' : 'more'
}
const showEmpty = computed(() => !wallList.value.length && noMore.value === 'noMore')
const showLoading = computed(() => wallList.value.length || noMore.value === 'loading')
watch(searchValue, () => { // 监听搜索框变化
	if (!searchValue.value) {
		wallList.value = []
		noMore.value = ''
	}
})
watch(historyList, () => { // 监听历史记录变化
	uni.setStorageSync('historySearch',historyList.value)
})

onReachBottom(() => {
	if (noMore.value === 'noMore') return;
	onSearch()
})
</script>

<style lang="scss" scoped>
.keywords-wrap {
	padding: 20rpx;
	.title {
		display: flex;
		justify-content: space-between;
		.left {
			font-size: 32rpx;
		}
	}
	.keywords {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		font-size: 28rpx;
		padding: 20rpx 0;
		.item {
			background-color: #eee;
			padding: 4rpx 20rpx;
			border-radius: 20rpx;
			margin-bottom: 10rpx;
		}
	}
}
.container {
	display: grid;
	gap: 5px;
	padding: 5px;
	grid-template-columns: repeat(3, 1fr);
	.item {
		height: 400rpx;
		.image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}
}
</style>
